<!-- 快速制作-选择模板 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="快速制作" name="1">
            <el-button size="large" class="more-btn" @click="onOpenTemplateDrawer">更换模板</el-button>
        </el-collapse-item>
    </el-collapse>
    <template-drawer ref="templateDrawerRef" />
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import TemplateDrawer from '@/components/edit/template-drawer'
export default defineComponent({
    name: 'RowFastMake',
    components: {
        TemplateDrawer
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const templateDrawerRef = ref(null)

        const onOpenTemplateDrawer = () => {
            templateDrawerRef.value.show({
                type: widgetType.value
            })
        }

        return {
            widget,
            widgetType,
            templateDrawerRef,
            onOpenTemplateDrawer
        }
    }
})
</script>

<style lang="less" scoped>
.more-btn {
    width: 100%;
    color: var(--edit-color-primary);
    border-color: var(--edit-color-primary);
    background-color: inherit;
}
</style>